<template>
  <BusinessHeader>
    用户注册
  </BusinessHeader>
  <div class="wrapper">
    <el-form
        ref="ruleFormRef"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
        :model="registerForm"
    >
      <el-form-item label="用户名:">
        <el-input  type="text" v-model="registerForm.userName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码:" prop="pass">
        <el-input  type="password" v-model="registerForm.userPassword" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="register">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
  <TabBar></TabBar>
</template>

<script setup>
import BusinessHeader from "@/components/common/HeaderPart";
import TabBar from '@/components/common/TabBar'
// import router from "@/router";
import {ref} from "vue";
import request from "@/utils/request";
import router from "@/router";
const registerForm = ref({userName:'',userPassword:''})
async function register(){
  let data = new FormData()
  data.append("username",registerForm.value.userName)
  data.append("password",registerForm.value.userPassword)
  let res =await request({url:'/user/register', method:'POST' ,data:data})
  if(res.flag){
    router.push({path:'/LoginPart',query:{'userInfo':JSON.stringify(registerForm.value)}})
  }
}
</script>

<style scoped>
.wrapper {
  margin-top: 5rem;
  margin-left: 3rem;
  margin-right: 3rem;
}
:deep(.el-form-item__label) {
  width: 75px !important;
}
.button {
  height: 2rem;
  width: 100%;
}
</style>
